<template>
  <div>
    <div class="risk_info">
      <header class="risk-btn"><span>风险信息</span></header>
      <div class="risk_info_content">
          <el-form :model="form" size="small" label-width="auto" style="max-width: 100%">
              <el-row>
                <el-col :span="4">
                   <el-form-item label="是否违反政策">
                    <el-select v-model="policy" placeholder="please select your zone">
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-button size="small" @click="openDialog">查询</el-button>
                  </el-col>
                <el-col :span="4">
                   <el-form-item label="是否命中黑名单">
                    <el-select v-model="blackList" placeholder="please select your zone">
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                     <el-button size="small" @click="openBlackListDialog">查询</el-button>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="是否已持卡">
                    <el-select v-model="hodeCard" placeholder="please select your zone">
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button size="small" @click="openCheckHoldCardDialog">查询</el-button>
                </el-col>
                <el-col :span="4">
                   <el-form-item label="是否在途申请">
                    <el-select v-model="policy" placeholder="please select your zone">
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-button size="small" @click="openApplicationDialog">查询</el-button>
                  </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                   <el-form-item label="是否历史拒绝">
                    <el-select v-model="policy" placeholder="please select your zone">
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                     <el-button size="small" @click="openHistoryRefusalDialog">查询</el-button>
                </el-col>
                <el-col :span="4">
                   <el-form-item label="是否反欺诈">
                    <el-select v-model="policy" placeholder="please select your zone">
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                   </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-button size="small" @click="openAntiFraudDialog">查询</el-button>
                  </el-col>
              </el-row>
          </el-form>
      </div>
    </div>
    
    <div  class="risk_process">
      <header class="risk-btn"><span>风险处理</span></header>
      <div class="risk_process_content">
          <el-form :model="form" label-width="auto" style="max-width: 100%" size="small">
                 <!-- <el-checkbox-group> -->
                  <el-row>
                      <el-col :span="4">
                        <div class="custom-checkbox">
                          <el-checkbox value="Online activities" name="type" v-model="form.name">
                            <span class="span-inline">姓名+出生日期</span>
                          </el-checkbox>
                        </div>
                      </el-col>
                      <el-col :span="4">
                        <div class="custom-checkbox">
                          <el-checkbox value="Online activities" name="type">
                            <span class="span-inline">证件号码</span>
                          </el-checkbox>
                        </div>
                      </el-col>
                       <el-col :span="4">
                         <div class="custom-checkbox">
                           <el-checkbox value="Online activities" name="type">
                            <span class="span-inline">手机号码</span>
                           </el-checkbox>
                         </div>
                      </el-col>
                       <el-col :span="4">
                         <div class="custom-checkbox">
                           <el-checkbox value="Online activities" name="type">
                            <span class="span-inline">住宅电话</span>
                           </el-checkbox>
                         </div>
                      </el-col>
                      <el-col :span="4">
                        <div class="custom-checkbox">
                          <el-checkbox value="Online activities" name="type">
                            <span class="span-inline">住宅地址</span>
                          </el-checkbox>
                        </div>
                      </el-col>
                      <el-col :span="4">
                        <div class="custom-checkbox">
                          <el-checkbox value="Online activities" name="type">
                            <span class="span-inline">单位名称</span>
                          </el-checkbox>
                        </div>
                      </el-col>
                  </el-row>
                   <el-row>
                     <el-col :span="4">
                       <div class="custom-checkbox">
                         <el-checkbox value="Online activities" name="type">
                          <span class="span-inline">单位电话</span>
                         </el-checkbox>
                       </div>
                     </el-col>
                     <el-col :span="4">
                       <div class="custom-checkbox">
                         <el-checkbox value="Online activities" name="type">
                          <span class="span-inline">单位地址</span>
                         </el-checkbox>
                       </div>
                     </el-col>
                     <el-col :span="4">
                       <div class="custom-checkbox">
                         <el-checkbox value="Online activities" name="type">
                          <span class="span-inline">直系亲属电话</span>
                           
                         </el-checkbox>
                       </div>
                     </el-col>
                     <el-col :span="4">
                       <div class="custom-checkbox">
                         <el-checkbox value="Online activities" name="type">
                          <span class="span-inline">直系亲属手机</span>
                           
                         </el-checkbox>
                       </div>
                     </el-col>
                     <el-col :span="4">
                       <div class="custom-checkbox">
                         <el-checkbox value="Online activities" name="type">
                           <span class="span-inline">联系人1电话</span>
                         </el-checkbox>
                       </div>
                     </el-col>
                     <el-col :span="4">
                       <div class="custom-checkbox">
                         <el-checkbox value="Online activities" name="type">
                          <span class="span-inline">联系人1手机</span>
                           
                         </el-checkbox>
                       </div>
                     </el-col>
                   </el-row>
                  <el-row>
                    <el-col :span="4">
                    <div class="custom-checkbox">
                      <el-checkbox value="Online activities" name="type">
                        <span class="span-inline">推广人姓名+推广机构</span>
                      </el-checkbox>
                    </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="custom-checkbox">
                        <el-checkbox value="Online activities" name="type">
                          <span class="span-inline">推广人联系电话</span>
                        </el-checkbox>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="custom-checkbox">
                        <el-checkbox value="Online activities" name="type">
                          <span class="span-inline">推广人编号</span>
                          
                        </el-checkbox>
                      </div>
                    </el-col>
                      <el-col :span="4">
                        <div class="custom-checkbox">
                          <el-checkbox value="Online activities" name="type">
                          <span class="span-inline">名单级别</span>
                            
                          </el-checkbox>
                        </div>
                    </el-col>
                      <el-col :span="4">
                        <div class="custom-checkbox">
                          <el-checkbox value="Online activities" name="type">
                          <span class="span-inline">名单来源</span>
                            
                          </el-checkbox>
                        </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="custom-checkbox">
                        <el-checkbox value="Online activities" name="type">
                          <span class="span-inline">单位电话</span>
                          
                        </el-checkbox>
                      </div>
                    </el-col>
                  </el-row>
                   <el-row>
                     <el-col :span="4">
                       <div class="custom-checkbox">
                         <el-checkbox value="Online activities" name="type">
                          <span class="span-inline">姓名+出生日期</span>
                           
                         </el-checkbox>
                       </div>
                     </el-col>
                   </el-row>
                <!-- </el-checkbox-group> -->
          </el-form>
      </div>
    </div>
    <div class="risk_desc">
      <div class="risk-btn"><span>案件详细描述</span></div>
      <div style="padding: 10px;">
        <el-form size="small">
          <el-form-item label="案件详细描述" label-width="120px">
            <el-input  v-model="textarea"
                       style="width: 800px;"
                       type="textarea"
                       :rows="4"
                       placeholder="Please input"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="risk_desc">
      <header class="risk-btn"><span>拟调查内容</span></header>
      <div style="padding: 10px;">
        <el-form size="small">
          <el-form-item label="拟调查内容" label-width="120px">
            <el-input  v-model="textarea"
                       style="width: 800px;"
                       type="textarea"
                       :rows="4"
                       placeholder="Please input"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="risk_desc">
      <header class="risk-btn"><span>防冒调查意见</span></header>
       <div style="padding: 10px;">
         <el-form size="small">
           <el-form-item label="防冒调查意见" label-width="120px">
             <el-input  v-model="textarea"
                        style="width: 800px;"
                        type="textarea"
                        :rows="4"
                        placeholder="Please input"></el-input>
           </el-form-item>
         </el-form>
      </div>
    </div>
     <div class="risk_refuse">
      <header class="risk-btn"><span>拒绝原因</span></header>
       <div style="padding: 10px">
         <el-form size="small">
           <el-form-item label="拒绝原因" label-width="120px">
             <el-input  v-model="textarea"
                        style="width: 800px;"
                        type="text"
                        placeholder="Please input"></el-input>
           </el-form-item>
         </el-form>
      </div>
    </div>
    <div class="risk_conclusion">
      <header class="risk-btn"><span>建议结论</span></header>
       <div style="padding: 10px;">
         <el-form size="small" :rules="formRules" :model="riskConclusionForm">
           <el-form-item label="建议结论一" label-width="120px" prop="conclusion">
             <el-select v-model="riskConclusionForm.conclusion" placeholder="please select your zone" clearable>
               <el-option label="Zone one" value="shanghai" />
               <el-option label="Zone two" value="beijing" />
             </el-select>
           </el-form-item>
           <el-form-item label="意见" label-width="120px">
             <el-input  v-model="textarea"
                        style="width: 800px;"
                        type="textarea"
                        :rows="4"
                        placeholder="Please input"></el-input>
           </el-form-item>
         </el-form>
      </div>
    </div>
    <div class="button-group">
      <el-row>
        <el-button size="small">转录入修改</el-button>
        <el-button size="small">微信联系</el-button>
        <el-button size="small" plain type="primary">主要按钮</el-button>
        <el-button size="small" plain type="success">提交</el-button>
        <el-button size="small" plain type="info">信息按钮</el-button>
        <el-button size="small" plain type="warning" @click="openSaveProgressDialog">临时保存</el-button>
        <el-button size="small" plain type="danger">取消</el-button>
        <el-button size="small" plain type="info">补件</el-button>
        <el-button size="small" plain type="danger">拒绝</el-button>
      </el-row>
    </div>
      <el-dialog title="是否违反政策弹框" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="date" label="日期" width="150"></el-table-column>
          <el-table-column property="name" label="姓名" width="200"></el-table-column>
          <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
      </el-dialog>
    <!--父组件传递dialog的状态值和获取子组件给父组件的状态值-->
    <CustomDialog :checkHoldCardDialog="checkHoldCardDialog" :getCenterDialogVisible="getCenterDialogVisible"></CustomDialog>
    <CheckBlackList ref="blackListDialog"></CheckBlackList>
    <ApplicationDialog ref="applicationDialog"></ApplicationDialog>
    <HistoryRefusalDialog ref="historyRefusalDialog" :fetch-data="fetchHistoryRefusalData"></HistoryRefusalDialog>
    <AntiFraudDialog ref="antiFraudDialog"></AntiFraudDialog>

    
    <!-- 临时保存进度对话框 -->
    <el-dialog title="保存进度" :visible.sync="saveProgressDialogVisible" width="400px" :close-on-click-modal="false" :show-close="false">
      <div class="progress-content">
        <p>一个后台任务正在执行，消耗时间 {{ elapsedSeconds }} 秒</p>
        <el-progress :percentage="progressPercentage" status="success"></el-progress>
    </div>
    </el-dialog>
  </div>


  
  
</template>

<script>
import axios from 'axios';
import CheckBlackList from './CheckBlackList';
import CustomDialog from './CustomDialog.vue';
const ApplicationDialog = ()=>import('./ApplicationDialog.vue')
const HistoryRefusalDialog =()=>import('./HistoryRefusalDialog.vue')
const AntiFraudDialog =() => import('./AntiFraudDialog.vue')
export default {
  components:{
    CheckBlackList,
    CustomDialog,
    ApplicationDialog,
    HistoryRefusalDialog,AntiFraudDialog
  },
  data(){
    return {
      riskConclusionForm:{
         conclusion:'',
      },
      policy:'',
      blackList:'',
      hodeCard:'',
      textarea:'',
      dialogTableVisible:false,  //是否违反政策弹框提示
      checkBlackListDialog:false,  //是否命中黑名单弹框
      checkHoldCardDialog: false,  //是否已持卡弹框
      blackListDialogTableVisible:false,
      applicationDialogVisible:false, //是否在途申请
      historyRefusalDialogVisible: false,  //历史拒绝检查
      saveProgressDialogVisible:false,
      saveProgressDialogVisible: false,
      elapsedSeconds: 0,
      progressPercentage: 0,
      timer: null,
      gridData: [
        {
          date: '2016-05-02',
          name: 'John Smith',
          address: 'No.1518,  Jinshajiang Road, Putuo District',
        },
        {
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1518,  Jinshajiang Road, Putuo District',
        },
        {
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1518,  Jinshajiang Road, Putuo District',
        },
        {
          date: '2016-05-03',
          name: 'John Smith',
          address: 'No.1518,  Jinshajiang Road, Putuo District',
        },],
      form:{
        name: true,
      },
      formRules:{
          conclusion: [
            { required: true, message: '建议结论不能为空', trigger: 'change' },
          ],
      }
    }
  },
  methods:{
    openDialog(event){
      console.log("点击确定事件被触发")
      this.dialogTableVisible = true;
      console.log("是否展示dialog对话框",this.dialogTableVisible)
    },
    openPolicyListDialog(){
      console.log("打开违反政策校验弹框")
      this.blackListDialogTableVisible = true
    },
     fetchApplicationData() {
          // 模拟API调用，实际项目中这里会是真实的HTTP请求
          return new Promise((resolve) => {
            setTimeout(() => {
              const mockData = [
                {
                  date: '2023-05-01',
                  applicationNumber: 'APP20230501001',
                  applicant: '张三',
                  status: '审核中'
                },
                {
                  date: '2023-05-02',
                  applicationNumber: 'APP20230502002',
                  applicant: '李四',
                  status: '待处理'
                },
                {
                  date: '2023-05-03',
                  applicationNumber: 'APP20230503003',
                  applicant: '王五',
                  status: '已完成'
                }
              ];
              resolve(mockData);
            }, 500);
          });
        },
        
        openApplicationDialog() {
          // 先获取数据
          this.fetchApplicationData().then(data => {
            // 将获取到的数据传递给子组件
            this.$refs.applicationDialog.applicationData = data;
            // 显示对话框
            this.$refs.applicationDialog.showDialog();
          });
        },
      async openSaveProgressDialog() {
        this.saveProgressDialogVisible = true;
        this.elapsedSeconds = 0;  //计时变量
        this.progressPercentage = 0;  //接口调用完成的标识
        let result = null;
     
      // 开始计时和进度更新
      this.timer = setInterval(() => {
        this.elapsedSeconds++;
        //this.progressPercentage += 5;
        
        // 模拟任务完成（100%进度）
        if (result != null) {
          console.log("接口调用完成，更新进度为100%",result);
          clearInterval(this.timer);  //接口调用完成就立即清除定时器
          this.saveProgressDialogVisible = false;
          //在右下角展示保存成功的提示
          if(result.success === true){  //注意这里适用==还是===，===会判断类型和值
              this.$notify({
                    title: '系统通知',
                    message: '保存成功!',
                    position: 'bottom-right'
            });
          }else{
            this.$notify.error({
                      title: '系统通知',
                      message: '保存失败!',
                      position: 'bottom-right'
                });
          }
          // 显示保存成功提示
          // this.$message({
          //   message: '保存成功',
          //   type: 'success',
          //   showClose: true,
          //   offset: 40
          // });
        }
      }, 1000); // 每500ms更新一次，模拟20秒完成
        //模拟调用接口耗时
      try {
        result = await this.customMethod();
        console.log('接口调用结果:', result);
        // 这里可以根据实际需求处理接口返回的数据
        //this.result = result;
      } catch (error) {
        console.error('接口调用失败:', error);
        // 处理错误情况
      }

     
      
    },
     customMethod(){
      // 模拟一个耗时5秒的axios接口调用
      return new Promise((resolve, reject) => {
        console.log('开始模拟axios接口调用...');

        axios.get('/api/home/dataCount')
          .then(response => {
            console.log('模拟axios接口调用成功:', response.data);
            // 这里可以返回模拟的数据
            resolve(response.data);
          })
          .catch(error => {
            console.error('模拟axios接口调用失败:', error);
            reject(error);
          });
        
        // 使用setTimeout模拟网络请求耗时5秒
      //   setTimeout(() => {
      //     // 模拟接口成功响应
      //     const mockResponse = {
      //       status: 200,
      //       data: {
      //         code: 0,
      //         message: '请求成功',
      //         result: {
      //           id: 1,
      //           name: '测试数据',
      //           timestamp: new Date().getTime()
      //         }
      //       }
      //     };
          
      //     console.log('模拟接口调用完成，耗时5秒');
      //     resolve(mockResponse);
          
      //     // 如果需要模拟失败情况，可以取消下面的注释
      //     /*
      //     const mockError = {
      //       status: 500,
      //       message: '服务器错误'
      //     };
      //     reject(mockError);
      //     */
      //   }, 5000);
      });
    
      },
   
         // 模拟API调用获取历史拒绝数据
        fetchHistoryRefusalData() {
          // 模拟API调用，实际项目中这里会是真实的HTTP请求
          return new Promise((resolve) => {
            setTimeout(() => {
              const mockData = [
                {
                  date: '2023-04-01',
                  applicationNumber: 'APP20230401001',
                  reason: '资料不全',
                  status: '已拒绝'
                },
                {
                  date: '2023-03-15',
                  applicationNumber: 'APP20230315002',
                  reason: '信用记录不良',
                  status: '已拒绝'
                },
                {
                  date: '2023-02-20',
                  applicationNumber: 'APP20230220003',
                  reason: '收入不足',
                  status: '已拒绝'
                }
              ];
              resolve(mockData);
            }, 500);
          });
        },
         openHistoryRefusalDialog() {
          // 显示对话框，并将fetchHistoryRefusalData函数传递给子组件
          this.$refs.historyRefusalDialog.showDialog();
        },
       openAntiFraudDialog() {
          this.$refs.antiFraudDialog.showDialog()
        },
    checkHoldCard(){

    },
    openBlackListDialog(){
      //触发打开黑名单窗口
      console.log("打开黑名单列表窗口")
      this.$refs.blackListDialog.openDialog()
      console.log("打开黑名单列表窗口")
    },
    openCheckHoldCardDialog(){
      //触发打开已持卡检查弹窗
      console.log("触发打开已持卡检查弹窗--------------------前")
      this.checkHoldCardDialog = true;
      console.log("触发打开已持卡检查弹窗--------------------后")
    },
     // 父组件定义一个方法来获取子组件的 centerDialogVisible 状态
        getCenterDialogVisible(val){
            console.log("获取子组件的 centerDialogVisible 状态", val);
            //修改父组件的 centerDialogVisible 状态
            this.dialogTableVisible = val;
            console.log("子组件的 centerDialogVisible 状态", this.dialogTableVisible);
        },
        //接受子组件传递胡状态值
        openDialogStatus(val){
          this.dialogTableVisible = false;
        },
        queryData(){
          return [];
        }
  }
}
</script>

<style>
.risk_info{
  width:100%;
  height:170px;
  border:2px solid #ddd;
}
.risk_process{
    width:100%;
    height:230px;
    border:2px solid #ddd;
}
.risk_desc{
  width:100%;
  height:160px;
  border:2px solid #ddd;
}
.risk_refuse{
    width:100%;
    height:100px;
    border:2px solid #ddd;
}
.risk_info_content{
  padding: 10px;
}
.risk_process_content{
  padding: 10px;
}
.risk_conclusion{
    width:100%;  
    height:210px;
    border:2px solid #ddd;
}
.inline-button{
  margin-left: 20px;
}
.span-inline{
    display: inline-block;
    text-align: right;
    width: 135px;
}
.risk-btn{
  height:40px;
  background-color: #ddd;
  color:#111;
  font-size: 14px;
  font-weight:bold;
  align-items: center;
  line-height: 40px;
}
.risk-btn span{
  margin-left:10px;
}
.custom-checkbox .el-checkbox {
  display: flex;
  flex-direction: row-reverse; /* 使 checkbox 在前 */
  align-items: center; /* 垂直居中 */
}
.custom-checkbox .el-checkbox__inner {
  margin-left: 10px;
}
.el-row{
  height:50px;
  
}
.el-button{
  margin-left: 8px;
}
.el-col{
  display: flex;
  align-items: center;
  justify-content: start;
}
.button-group{
  margin: 10px;
}
/**
 调整文本域的label的样式
 */

</style>